<template>
  <div class="container">
    <!-- 头像 -->
    <div class="user_img">
      <img src="https://w.wallhaven.cc/full/p9/wallhaven-p98xkp.jpg" alt="" />
    </div>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="formInfo.username"
          name="name"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="formInfo.password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <!-- 仅注册用 -->
        <!-- 头像 -->
        <van-field
         v-if="!isLogin"
          v-model="formInfo.avatar"
          type="url"
          name="avatar"
          label="头像"
          placeholder="图片地址"
           disabled
          
        />
        <!-- 性别 -->
        <van-field v-if="!isLogin" name="sex" label="性别">
          <template #input>
            <van-radio-group v-model="formInfo.sex" direction="horizontal">
              <van-radio :name="1">男</van-radio>
              <van-radio :name="0">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <!-- 个性签名 -->
        <van-field
         v-if="!isLogin"
          v-model="formInfo.sign"
          type="text"
          name="sign"
          label="签名"
          placeholder="个性签名"
          :rules="[{ required: true, message: '请填写个性签名' }]"
        />
        <!-- 密保 -->
         <van-field
          v-if="!isLogin"
          v-model="formInfo.secretAnswer"
          type="text"
          name="secret_answer"
          label="密保"
          placeholder="验证密保"
          :rules="[{ required: true, message: '请填写密保' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="success" native-type="submit">
          {{ isLogin ? "登录" : "注册" }}
        </van-button>
        <van-button
          round
          block
          type="primary"
          native-type="submit"
          @click="isLogin = !isLogin"
        >
          {{ isLogin ? "注册" : "返回登录" }}
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<script setup>
import { showNotify } from "vant";
import { ref, reactive } from "vue";
import { setToken } from "@/utils/cookie.js";
import { useRouter } from "vue-router";
import { login, register } from "@/api/user";
import useInfo from "@/stores/useInfo";
// import userCartInfo from '@/stores/userCartInfo'
let isLogin = ref(true);
let router = useRouter();
let store = useInfo();
// let cartStores = userCartInfo()
let formInfo = ref({
  username: "",
  password: "",
  avatar: "",
  sex: "1",
  sign: "",
  secretAnswer: "",
});
let onSubmit = async (value) => {
  if (isLogin.value) {
    let res = await login(value);

    showNotify({ type: "success", message: "登录成功" });
    //存储token 到cookie
    setToken(res.data.token, res.data.expire_in);
    store.setUserInfo({
      name: value.name,
      avatar: res.data.avatar, //头像
      sex: res.data.sex, //性别，
      sign: res.data.sign, //简介
    });
    // cartStores.getCartInfo()
    //跳转至首页
    router.replace("/home");
  } else {
    await register(value);
    formInfo.value.password = "";
    showNotify({
      type: "success",
      message: "注册成功",
      onClose: () => {
        isLogin.value = true;
      },
    });
  }
};
</script>
<style lang="scss" scoped>
.container {
  margin-top: 40px;

  .user_img {
    height: 100px;
    padding-top: 58px;
    margin-bottom: 28px;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 88px;
      height: 88px;
      border-radius: 50%;
      object-fit: cover;
    }
  }

  .registerBtn {
    margin-top: 12px;
  }
}
</style>